<template>
    <div class="rightContent">
        <!-- 顶部 -->
        <div class="top">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">购物订单</el-menu-item>
                <el-menu-item index="2">转运订单</el-menu-item>
            </el-menu>
        </div>

        <!-- 顶部一排按钮 -->
        <div class="searchBtn">
            <ul>
                <li v-for="(item, index) in menuList" :key="index" @click="menuActive = item"
                    :class="menuActive == item ? 'activeStyle' : ''">{{ item }}</li>
            </ul>
        </div>

        <!-- 订单区域 -->
        <div class="orderArea">
            <div v-if="orderNum != 0" class="haveOrder">

            </div>
            <div v-else class="noOrder">
                <div class="box">
                    <div class="noOrderLeft">
                        <svg class="icon">
                            <use xlink:href="#icon-yishengduanicon-50"></use>
                        </svg>
                    </div>
                    <div class="noOrderRight">
                        <div>您暂时没有待确认/补款订单！</div>
                        <div>
                            <span>去查看</span>
                            <span>全部订单</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "myOrder",
    data() {
        return {
            activeIndex: '1',
            menuList: ["全部",
                "待付款",
                "订购中",
                "待确认/补款",
                "已发货入库",
                "售后"
            ],
            menuActive: '',  // 橙色菜单点击样式的显示
            orderNum: 0,
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
    }
}
</script>

<style scoped lang="scss">
.rightContent {
    // background-color: pink;
    width: 80%;
    margin-left: 25px;

    .top {
        border-bottom: 1px solid #00bebf;

        .el-menu-demo {
            .el-menu--horizontal>.el-menu-item {
                float: left;
                height: 40px;
                line-height: 40px;
                margin: 0;
                border-bottom: 2px solid transparent;
                color: #909399;
            }

            &>.el-menu-item.is-active {
                border-bottom: 2px solid #00bebf;
                color: #303133;
            }
        }
    }

    .searchBtn {
        margin-top: 15px;
        // background-color: blue;

        ul {
            display: flex;

            li {
                display: block;
                width: 146px;
                height: 28px;
                border: 1px solid #e6e6e6;
                text-align: center;
                line-height: 30px;
                color: #959595;
                text-decoration: none;
                background-color: white;
                margin-right: 10px;
                cursor: pointer;
                transition: color .1s ease;

                &:hover {
                    border: 1px solid #fd6602;
                    background: #fd6602;
                    color: #fff;
                }
            }

            .activeStyle {
                border: 1px solid #fd6602;
                background: #fd6602;
                color: #fff;
            }

        }
    }

    .orderArea {
        margin-top: 15px;
        height: 300px;
        .haveOrder {}

        .noOrder {
            height: 300px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-content: center;
            padding-bottom: 100px;


            .box {
                width: 100%;
                height: 100%;
                /* 继承父容器高度 */
                display: flex;
                justify-content: center;
                align-items: center;


                .noOrderLeft {

                    // background-color: red;
                    .icon {
                        width: 80px;
                        height: 50px;
                    }

                }

                .noOrderRight {

                    // background-color: pink;
                    div:nth-child(1) {
                        color: #FF6600;
                        font-size: 14px;
                        font-weight: bold;
                        padding-bottom: 0px;
                        line-height: 22px;
                    }

                    div:nth-child(2) {
                        span:nth-child(2) {
                            color: #1890ff;
                            margin-left: 10px;
                        }
                    }

                }
            }
        }
    }
}
</style>